<!--
  文件名: Blog.vue
  描述: 这是一个博客部分，展示各类文章，是一个组件。参考界面为CSDN
  作者: 白紫铜
  创建日期: 2024-03-29
-->
<template>
<div>
  <el-container>
    <el-aside style="width: 150px;"></el-aside>
    <el-main class="main">
      <el-row>
        <el-col :span="24" class="col_2">
          <el-tabs class="tabs_0" type="border-card">
            <el-tab-pane label="关注" class="tab_pane">
              <div v-if="focus_blogs.length === 0">
                <el-empty description="暂无关注的博客"></el-empty>
              </div>
              <el-row v-for="blog in focus_blogs" :key="blog.id">
                <div class="blog-info">
                  <img :src="blog.coverUrl" alt="博客封面" style="display: flex; height: 135px;width: 240px;align-items: center;text-align: center">
                  <div class="blog-info-details">
                    <el-link @click="gotoBlogDetails(blog)" class="blog-info-title">{{ blog.title }}</el-link>
                    <div class="blog-info-description">{{ blog.summary }}</div>
                    <el-link class="blog-info-author" @click="gotoUserInfo(blog.author.username)">作者：{{ blog.author.username }}</el-link>
                    <div class="blog-info-created-at">创建时间：{{ formatDate(blog.createdAt) }}</div>
                    <span class="blog-info-created-at">标签：{{ blog.tags }}</span>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="推荐" class="tab_pane">
              <el-row v-for="blog in blogs" :key="blog.id">
                <div class="blog-info">
                  <img :src="blog.coverUrl" alt="博客封面" style="display: flex; height: 135px;width: 240px;align-items: center;text-align: center">
                  <div class="blog-info-details">
                    <el-link @click="gotoBlogDetails(blog)" class="blog-info-title">{{ blog.title }}</el-link>
                    <div class="blog-info-description">{{ blog.summary }}</div>
                    <el-link class="blog-info-author" @click="gotoUserInfo(blog.author.username)">作者：{{ blog.author.username }}</el-link>
                    <div class="blog-info-created-at">创建时间：{{ formatDate(blog.createdAt) }}</div>
                    <span class="blog-info-created-at">标签：{{ blog.tags }}</span>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="web3.0" class="tab_pane">
              <el-row v-for="blog in web3_blogs" :key="blog.id">
                <div class="blog-info">
                  <img :src="blog.coverUrl" alt="博客封面" style="display: flex; height: 135px;width: 240px;align-items: center;text-align: center">
                  <div class="blog-info-details">
                    <el-link @click="gotoBlogDetails(blog)" class="blog-info-title">{{ blog.title }}</el-link>
                    <div class="blog-info-description">{{ blog.summary }}</div>
                    <el-link class="blog-info-author" @click="gotoUserInfo(blog.author.username)" >作者：{{ blog.author.username }}</el-link>
                    <div class="blog-info-created-at">创建时间：{{ formatDate(blog.createdAt) }}</div>
                    <span class="blog-info-created-at">标签：{{ blog.tags }}</span>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="智能合约" class="tab_pane">
              <el-row v-for="blog in smart_blogs" :key="blog.id">
                <div class="blog-info">
                  <img :src="blog.coverUrl" alt="博客封面" style="display: flex; height: 135px;width: 240px;align-items: center;text-align: center">
                  <div class="blog-info-details">
                    <el-link @click="gotoBlogDetails(blog)" class="blog-info-title">{{ blog.title }}</el-link>
                    <div class="blog-info-description">{{ blog.summary }}</div>
                    <el-link class="blog-info-author" @click="gotoUserInfo(blog.author.username)">作者：{{ blog.author.username }}</el-link>
                    <div class="blog-info-created-at">创建时间：{{ formatDate(blog.createdAt) }}</div>
                    <span class="blog-info-created-at">标签：{{ blog.tags }}</span>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="Coin" class="tab_pane">
              <el-row v-for="blog in coin_blogs" :key="blog.id">
                <div class="blog-info">
                  <img :src="blog.coverUrl" alt="博客封面" style="display: flex; height: 135px;width: 240px;align-items: center;text-align: center">
                  <div class="blog-info-details">
                    <el-link @click="gotoBlogDetails(blog)" class="blog-info-title">{{ blog.title }}</el-link>
                    <div class="blog-info-description">{{ blog.summary }}</div>
                    <el-link class="blog-info-author" @click="gotoUserInfo(blog.author.username)">作者：{{ blog.author.username }}</el-link>
                    <div class="blog-info-created-at">创建时间：{{ formatDate(blog.createdAt) }}</div>
                    <span class="blog-info-created-at">标签：{{ blog.tags }}</span>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane @click="set" label="DApps" class="tab_pane">
              <el-row v-for="blog in DApps_blogs" :key="blog.id">
                <div class="blog-info">
                  <img :src="blog.coverUrl" alt="博客封面" style="display: flex; height: 135px;width: 240px;align-items: center;text-align: center">
                  <div class="blog-info-details">
                    <el-link @click="gotoBlogDetails(blog)" class="blog-info-title">{{ blog.title }}</el-link>
                    <div class="blog-info-description">{{ blog.summary }}</div>
                    <el-link class="blog-info-author" @click="gotoUserInfo(blog.author.username)">作者：{{ blog.author.username }}</el-link>
                    <div class="blog-info-created-at">创建时间：{{ formatDate(blog.createdAt) }}</div>
                    <span class="blog-info-created-at">标签：{{ blog.tags }}</span>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <div ref="loadMoreTrigger" style="height: 10px;"></div>
    </el-main>
    <el-aside style="width: 150px;"></el-aside>
  </el-container>
</div>
</template>

<script>
import axios from "axios";

export default {
  name:"BlogAll",
  data(){
    return{
      username:"",
      blogs:[],
      page:0,
      focus_page:0,
      tag_page:0,
      pageSize:10,
      loading:false,
      observer: null,
      focus_blogs:[],
      web3_blogs:[],
      DApps_blogs:[],
      smart_blogs:[],
      coin_blogs:[],
      isLogin:false,
    }
  },
  created() {
    const isAuthenticated=localStorage.getItem('token')
    if(isAuthenticated==null){
      this.isLogin=false
    }
    if(isAuthenticated){
      this.isLogin=true
    }
  },
  mounted() {
    this.observer=new IntersectionObserver(this.handleIntersection,{
      root:null,
      rootMargin:'0px',
      threshold:0.5,
    })
    this.observer.observe(this.$refs.loadMoreTrigger)
  },
  beforeUnmount() {
    if(this.observer){
      this.observer.disconnect()
    }
  },
  methods:{
    fetchBlogs(){
      const token=localStorage.getItem('token')
      const config={
        headers:{
          Authorization:`Bearer ${token}`
        },
        params:{
          page:this.page,
          pageSize:this.pageSize
        }
      }
      axios.get('http://localhost:1145/all_blogs',config)
          .then(response=>{
            this.blogs=this.blogs.concat(response.data.content)
            this.page++
            this.loading=false
          }).catch(error => {
        console.error('获取博客数据失败', error);
        this.loading = false;
      });
      axios.get('http://localhost:1145/api/get_followed_posts',{
        headers:{
          Authorization:`Bearer ${token}`
        },
        params:{
          user_id:localStorage.getItem("user_id"),
          page:this.focus_page,
          pageSize:this.pageSize
        }
      }).then(response=>{
        this.focus_blogs=this.focus_blogs.concat(response.data.content)
        this.focus_page++;
        this.loading=false
      }).catch(error => {
        console.error('获取博客数据失败', error);
        this.loading = false;
      });
    },
    fetchTagBlogs(){
      const token=localStorage.getItem('token')
      const config={
        headers:{
          Authorization:`Bearer ${token}`
        },
        params:{
          page:this.tag_page,
          pageSize:this.pageSize
        }
      }
      axios.get('http://localhost:1145/web_blogs',config)
          .then(response=>{
            this.web3_blogs = this.web3_blogs.concat(response.data.content)
            this.tag_page++
            this.loading=false
          }).catch(error => {
        console.error('获取博客数据失败', error);
        this.loading = false;
      });
      axios.get('http://localhost:1145/dapp_blogs',config)
          .then(response=>{
            this.DApps_blogs = this.DApps_blogs.concat(response.data.content)
            this.loading=false
          }).catch(error => {
        console.error('获取博客数据失败', error);
        this.loading = false;
      });
      axios.get('http://localhost:1145/smart_blogs',config)
          .then(response=>{
            this.smart_blogs = this.smart_blogs.concat(response.data.content)
            this.loading=false
          }).catch(error => {
        console.error('获取博客数据失败', error);
        this.loading = false;
      });
      axios.get('http://localhost:1145/coin_blogs',config)
          .then(response=>{
            this.coin_blogs = this.coin_blogs.concat(response.data.content)
            this.loading=false
          }).catch(error => {
        console.error('获取博客数据失败', error);
        this.loading = false;
      });
    },

    formatDate(dateTime){
      const date=new Date(dateTime)
      const year=date.getFullYear()
      const month=String(date.getMonth()+1).padStart(2,'0')
      const day=String(date.getDay()).padStart(2,'0')
      return`${year}-${month}-${day}`;
    },
    handleIntersection(entries){
      entries.forEach(entry=>{
        if(entry.isIntersecting){
          this.fetchBlogs()
          this.fetchTagBlogs()
        }
      })
    },
    gotoBlogDetails(blog){
      this.$router.push({
            name:"BlogDetails",
            params:{
              user_id:blog.author.user_id,
              post_id:blog.id,
              title:encodeURIComponent(blog.title) // 编码标题，以防止特殊字符对路由造成影响
            }
          }
      )
    },
    gotoUserInfo(username){
      if(username==="账户已注销")
      {
        this.$message.info("用户已注销")
      }else {
        this.$router.push({name:"UserInfo",params:{user:encodeURIComponent(username)}})
      }
    }
  }
}
</script>

<style scoped>
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active){
  color: #606266 !important;
  font-weight: bold;
}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover){
  color: #606266 !important;
  background-color: #ffffff;
}
.main{
  width: 1050px;
  min-height: calc(100vh - 65px);
  overflow-y: auto;
}
.blog-info {
  display: flex;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 100%;
}

.blog-info img {
  width: 160px;
  height: 90px;
  margin-right: 20px;
}

.blog-info-details {
  flex-grow: 1;
}

.blog-info-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.blog-info-author {
  font-style: italic;
  color: #666;
}

.blog-info-description {
  margin-top: 10px;
}
.el-link{
  color: black;
  text-decoration: none !important;
}
.el-link:hover{
  color: #606266;
  border-bottom: none !important;
  text-decoration: none !important;
}
.el-link::after{
  color: #606266;
  border-bottom: none !important;
  text-decoration: none !important;
}
</style>